import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import moment, { isDate } from 'moment';
import router from 'umi/router';
import { Form, Input, Select, Collapse, DatePicker } from 'antd';
import { queryFileList, formatPrice } from '@/utils/common';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTable from '@/components/StandardTable';
import DetailsList from '@/components/DetailsList';
import styles from '@/pages/Detail.less';
import { formatFile, formatCodeVal } from '@/pages/Common/common';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
const Panel = Collapse.Panel;

@connect(({ manageEtc, loading, common }) => ({
  manageEtc,
  loading: loading.models.manageEtc,
  dictObject: common.dictObject,
}))
@Form.create()
export default class ETCChangeDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      papersDetails: {},
      checkId: '',
      loading: false,
      previewVisible: false,
      previewImage: '',
      fileList: [],
      activeKey: ['1', '2'],
      paperType: {},
      paperTypeHandle: '',
      deleteFileIds: [],
    };
  }
  componentDidMount() {
    const { dispatch, dictObject, checkId } = this.props;
    this.setState({
      checkId: checkId,
    });
    this.queryFileList(checkId);
    //查询字典：
    //币种：
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'currency-type' },
    });
  }

  componentWillReceiveProps(nextProps) {
    const { checkId, dispatch } = nextProps;
    if (this.props.checkId !== checkId) {
      this.setState({
        checkId,
      });
      this.queryFileList(checkId);
    }
  }
  queryFileList = id => {
    queryFileList({
      props: this.props,
      params: { bizId: id, fileBizType: 'ETC_CHANGE_MANA' },
      callback: data => {
        if (!data) return;
        this.setState({ fileList: data });
      },
    });
  };

  callback = key => {
    // console.log(key);
    this.setState({
      activeKey: key,
    });
  };
  render() {
    const { checkId, previewVisible, previewImage, fileList, papersDetails } = this.state;

    const {
      form: { getFieldDecorator },
      manageEtc: { etcChangetDetails },
      isMobile,
      loading,
      dictObject,
    } = this.props;
    const selectDetails = etcChangetDetails[checkId];
    const isRecharge =
      selectDetails &&
      (selectDetails.tradingType == 'RECHARGE' || selectDetails.tradingType == '充值')
        ? true
        : false;

    const customPanelStyle = {
      borderRadius: 4,
      marginBottom: 12,
      border: 0,
      overflow: 'hidden',
    };
    const currencyType = selectDetails
      ? formatCodeVal(dictObject['currency-type'], selectDetails.currencyType)
      : '';
    const changeMoney = selectDetails ? formatPrice(selectDetails.changeMoney) : '';

    const fields = [
      { key: 'etcChangeNo', name: '单据号码' },
      { key: 'cartPlateNo', name: '车牌号' },
      { key: 'etcNo', name: 'ETC卡号' },
      { key: 'ownCompanyName', name: '所属公司' },
    ];

    let fieldsCost = [
      { key: currencyType, name: '币种', isConst: true },
      { key: changeMoney, name: '金额', isConst: true },
      // { key: 'tradingType', name: '交易性质' },
      // { key: 'trainNo', name: '车次号' },
      { key: 'remarks', name: '备注', isRow: true },
      { key: 'attachments', name: '票据', isRow: true, isFile: fileList },
    ];
    if (isRecharge) {
      fieldsCost.splice(2, 0, { key: 'locationName', name: '充值地点' });
    } else {
      fieldsCost.splice(
        2,
        0,
        { key: 'entranceTime', name: '入口时间' },
        { key: 'entranceStation', name: '入口站' },
        { key: 'exportTime', name: '出口时间/交易时间' },
        { key: 'exportStation', name: '出口站/交易站' },
        { key: 'locationName', name: '交易省份' }
      );
    }

    return (
      <div className={styles.CollapseDetails}>
        <Collapse
          activeKey={this.state.activeKey}
          onChange={key => this.callback(key)}
          bordered={false}
        >
          <Panel header="基础信息" key="1" className={styles.customPanelStyle}>
            <DetailsList
              isMobile={isMobile}
              detilsData={{ fields: fields, value: selectDetails }}
            />
          </Panel>
          <Panel header="费用详情" key="2" className={styles.customPanelStyle}>
            <DetailsList
              isMobile={isMobile}
              detilsData={{ fields: fieldsCost, value: selectDetails, fileList }}
            />
          </Panel>
        </Collapse>
      </div>
    );
  }
}
